<template>
  <div class="box">
    <el-form :model="form">
      <el-form-item>
        <!-- 切换城市 -->
        <el-autocomplete
          @blur="setCityName"
          class="inline-input"
          v-model="form.cityName"
          :fetch-suggestions="querySearch"
          placeholder="切换城市"
          :trigger-on-focus="false"
          @select="handleSelect"
        ></el-autocomplete>
      </el-form-item>

      <el-form-item>
        <!-- 入住日期&&离店日期 -->
        <el-date-picker
          v-model="time"
          type="daterange"
          range-separator="-"
          start-placeholder="入住日期"
          end-placeholder="离店日期"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <!-- 人数未定 -->
        <el-popover
          v-model="popoverflag"
          placement="bottom"
          width="400"
          trigger="click"
        >
          <div class="people">
            <span>每间</span>
            <!-- 成人 -->
            <el-select
              size="mini"
              @change="setvalue"
              v-model="adultValue"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in adultLIst"
                :key="index"
                :label="item.value"
                :value="item.label"
              ></el-option>
            </el-select>
            <!-- 儿童 -->
            <el-select
              size="mini"
              @change="setchildrenvalue"
              v-model="childrenValue"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in childrenLIst"
                :key="index"
                :label="item.value"
                :value="item.label"
              ></el-option>
            </el-select>
          </div>
          <div class="btn">
            <el-button type="primary" @click="sureClick" size="mini"
              >确定</el-button
            >
          </div>
          <el-input
            @focus="$refs.inputRef.blur()"
            placeholder="人数未定"
            suffix-icon="el-icon-user"
            ref="inputRef"
            slot="reference"
            :value="inputvalue"
          ></el-input>
        </el-popover>
      </el-form-item>
      <el-form-item>
        <el-button @click="searchPrice" type="primary">查看价格</el-button>
      </el-form-item>
    </el-form>
    <div class="main">
      <div class="left">
        <!-- 区域 -->
        <div class="aera">
          <p>区域 :</p>
          <div class="itemBox">
            <!-- text增加active类名就会heightauto -->
            <div v-if="scenic.length" :class="['text', { active: unfoldFlag }]">
              <div class="item" v-for="item in scenic" :key="item.id">
                {{ item.name }}
              </div>
            </div>
            <div class="unfold" @click="unfoldFlag = !unfoldFlag">
              <!-- el-icon是向上 i默认向上 -->
              <i
                :class="[{ 'el-icon': !unfoldFlag }, 'el-icon-d-arrow-right']"
              ></i>
              等{{ scenic.length }}个区域
            </div>
          </div>
        </div>
        <!-- 均价 -->
        <div class="price">
          <span>
            均价
            <el-tooltip
              class="item"
              effect="dark"
              content="等级均价由平日价格计算得出，节假日价格会有上浮。"
              placement="top-start"
            >
              <div class="prompt">?</div> </el-tooltip
            >:
          </span>
          <span>
            <div class="numbox">
              <el-tooltip
                class="item"
                effect="dark"
                content="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
                placement="bottom"
              >
                <template>
                  <div>
                    <i class="iconfont iconhuangguan"></i>
                    <i class="iconfont iconhuangguan"></i>
                    <i class="iconfont iconhuangguan"></i>
                  </div>
                </template>
              </el-tooltip>
            </div>
            ￥332
          </span>
          <span>
            <div class="numbox">
              <el-tooltip
                class="item"
                effect="dark"
                content="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
                placement="bottom"
              >
                <template>
                  <div>
                    <i class="iconfont iconhuangguan"></i>
                    <i class="iconfont iconhuangguan"></i>
                    <i class="iconfont iconhuangguan"></i>
                    <i class="iconfont iconhuangguan"></i>
                  </div>
                </template>
              </el-tooltip>
            </div>
            ￥521
          </span>
          <span>
            <div class="numbox">
              <el-tooltip
                class="item"
                effect="dark"
                content="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
                placement="bottom"
              >
                <template>
                  <div>
                    <i class="iconfont iconhuangguan"></i>
                    <i class="iconfont iconhuangguan"></i>
                    <i class="iconfont iconhuangguan"></i>
                    <i class="iconfont iconhuangguan"></i>
                    <i class="iconfont iconhuangguan"></i>
                  </div>
                </template>
              </el-tooltip>
            </div>
            ￥768
          </span>
        </div>
      </div>
      <div class="right" id="container" v-loading="loading"></div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["data"],
  data() {
    return {
      loading: true,
      unfoldFlag: false,
      time: [],
      enterTime: "",
      leftTime: "",
      form: {
        cityName: ""
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 24 * 60 * 60 * 1000;
        }
      },
      childrenLIst: [
        {
          value: "0",
          label: "0"
        },
        {
          value: "1",
          label: "1"
        },
        {
          value: "2",
          label: "2"
        },
        {
          value: "3",
          label: "3"
        },
        {
          value: "4",
          label: "4"
        }
      ],
      adultLIst: [
        {
          value: "1",
          label: "1"
        },
        {
          value: "2",
          label: "2"
        },
        {
          value: "3",
          label: "3"
        },
        {
          value: "4",
          label: "4"
        },
        {
          value: "5",
          label: "5"
        },
        {
          value: "6",
          label: "6"
        },
        {
          value: "7",
          label: "7"
        }
      ],
      // 下拉框的默认值
      adultValue: "2 成人",
      childrenValue: "0 儿童",
      // 人数框的值
      inputvalue: "",
      newData: [],
      person: 0,
      // 区域
      scenic: [],
      // 人数框的显示和隐藏
      popoverflag: false
    };
  },
  // 地图
  mounted() {
    this.getmap(this.data);
  },
  methods: {
    querySearch(cityName, cb) {
      this.$axios.get("/cities", { params: { name: cityName } }).then(res => {
        const { data } = res;
        this.newData = data.data.map(x => {
          return {
            ...x,
            value: x.name
          };
        });
        cb(this.newData);
      });
    },
    // 下拉城市点击触发
    handleSelect(item) {
      var str = "/hotel?";
      var obj = { ...this.$route.query };
      obj.cityName = item.name;

      // 住宿等级
      var hotellevelArr = [];
      // 住宿类型
      var hoteltypeArr = [];
      // 酒店设施
      var hotelassetArr = [];
      // 酒店品牌
      var hotelbrandArr = [];
      // / 住宿等级
      if (this.$route.query.hotellevel_in) {
        hotellevelArr = [...this.$route.query.hotellevel_in];
      }
      // 住宿类型
      if (this.$route.query.hoteltype_in) {
        hoteltypeArr = [...this.$route.query.hoteltype_in];
      }
      // 酒店设施
      if (this.$route.query.hotelasset_in) {
        hotelassetArr = [...this.$route.query.hotelasset_in];
      }
      // 酒店品牌
      if (this.$route.query.hotelbrand_in) {
        hotelbrandArr = [...this.$route.query.hotelbrand_in];
      }
      // 判断住宿等级是否是数组
      if (hotellevelArr.length > 1) {
        delete obj.hotellevel_in;
        hotellevelArr.forEach(x => {
          str += "hotellevel_in=" + x + "&";
        });
      }
      // 判断住宿类型是否是数组
      if (hoteltypeArr.length > 1) {
        delete obj.hoteltype_in;
        hoteltypeArr.forEach(x => {
          str += "hoteltype_in=" + x + "&";
        });
      }
      // 判断酒店设施是否是数组
      if (hotelassetArr.length > 1) {
        delete obj.hotelasset_in;
        hotelassetArr.forEach(x => {
          str += "hotelasset_in=" + x + "&";
        });
      }
      // 判断酒店品牌是否是数组
      if (hotelbrandArr.length > 1) {
        delete obj.hotelbrand_in;
        hotelbrandArr.forEach(x => {
          str += "hotelbrand_in=" + x + "&";
        });
      }

      for (var key in obj) {
        str += key + "=" + obj[key] + "&";
      }
      str = str.replace(/&$/, "");
      this.$router.replace(str);
      // 修改了下拉框时，数据没有发生改变
      // this.$emit("gethotelList", item.id);
    },
    setCityName() {
      if (this.newData.length) {
        this.form.cityName = this.newData[0].value;
      }
    },
    // 查找价格的按钮
    searchPrice() {
      var str = "/hotel?";
      var obj = { ...this.$route.query };

      // 住宿等级
      var hotellevelArr = [];
      // 住宿类型
      var hoteltypeArr = [];
      // 酒店设施
      var hotelassetArr = [];
      // 酒店品牌
      var hotelbrandArr = [];
      // / 住宿等级
      if (this.$route.query.hotellevel_in) {
        hotellevelArr = [...this.$route.query.hotellevel_in];
      }
      // 住宿类型
      if (this.$route.query.hoteltype_in) {
        hoteltypeArr = [...this.$route.query.hoteltype_in];
      }
      // 酒店设施
      if (this.$route.query.hotelasset_in) {
        hotelassetArr = [...this.$route.query.hotelasset_in];
      }
      // 酒店品牌
      if (this.$route.query.hotelbrand_in) {
        hotelbrandArr = [...this.$route.query.hotelbrand_in];
      }
      // 判断住宿等级是否是数组
      if (hotellevelArr.length > 1) {
        delete obj.hotellevel_in;
        hotellevelArr.forEach(x => {
          str += "hotellevel_in=" + x + "&";
        });
      }
      // 判断住宿类型是否是数组
      if (hoteltypeArr.length > 1) {
        delete obj.hoteltype_in;
        hoteltypeArr.forEach(x => {
          str += "hoteltype_in=" + x + "&";
        });
      }
      // 判断酒店设施是否是数组
      if (hotelassetArr.length > 1) {
        delete obj.hotelasset_in;
        hotelassetArr.forEach(x => {
          str += "hotelasset_in=" + x + "&";
        });
      }
      // 判断酒店品牌是否是数组
      if (hotelbrandArr.length > 1) {
        delete obj.hotelbrand_in;
        hotelbrandArr.forEach(x => {
          str += "hotelbrand_in=" + x + "&";
        });
      }

      // 城市名查找
      if (this.form.cityName) {
        var index = this.newData.findIndex(x => {
          return x.value == this.form.cityName;
        });
        if (index != -1) {
          // 有该城市
          // this.handleSelect(this.newData[index])
          str += "cityName=" + this.newData[index].value + "&";
        }
      } else if (this.$route.query.cityName) {
        str += "cityName=" + this.$route.query.cityName + "&";
      }
      delete obj.cityName;
      for (var key in obj) {
        str += key + "=" + obj[key] + "&";
      }
      // 拼接日期
      if (this.time.length != 0) {
        this.enterTime = this.$moment(this.time[1]).format("YYYY-MM-DD");
        this.leftTime = this.$moment(this.time[0]).format("YYYY-MM-DD");
        str +=
          "enterTime=" + this.enterTime + "&leftTime=" + this.leftTime + "&";
      }
      str = str.replace(/&$/, "");
      // 人数不需要传
      this.$router.replace(str);
      // 发送请求
      this.$emit("citySearch", this.form.cityName); //hotelitem
    },
    // 成人数设置
    setvalue(newValue) {
      this.adultValue = newValue + " 成人";
    },
    // 儿童数发生变化时
    setchildrenvalue(newValue) {
      this.childrenValue = newValue + " 儿童";
    },
    // 人数框的确认事件
    sureClick() {
      this.popoverflag = false;
      this.inputvalue = this.adultValue;
      if (this.childrenValue != "0 儿童") {
        this.inputvalue += this.childrenValue;
      }
    },
    // 获取区域列表
    getScenic() {
      this.$axios
        .get("/cities", { params: { name: this.$route.query.cityName } })
        .then(res => {
          // 阻止报错
          if (res.data.data.length === 0) {
            return;
          }
          this.scenic = res.data.data[0].scenics;
        });
    },
    // 地图渲染
    getmap(data) {
      var that = this;
      var obj = {};
      if (data.length != 0) {
        obj = {
          zoom: 10,
          center: [data[0].location.longitude, data[0].location.latitude]
        };
      }
      window.onLoad = function() {
        var map = new AMap.Map("container", obj);
        // 定位
        if (!that.$route.query.cityName) {
          that.getPositioning(that);
        }

        var markers = data.map((x, i) => {
          return new AMap.Marker({
            position: new AMap.LngLat(
              x.location.longitude,
              x.location.latitude
            ),
            title: x.name,
            content: `
          <div class="content-marker"> 
            <img src="http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png"> 
            <div class="marker-index">${i + 1}</div>
          </div>
          `
          });
        });
        map.add(markers);
        this.loading = false;
      }.bind(this);

      var url =
        "https://webapi.amap.com/maps?v=1.4.15&key=ae6df95d005362e52795baf84692fa30&callback=onLoad";
      var jsapi = document.createElement("script");
      jsapi.charset = "utf-8";
      jsapi.src = url;
      document.head.appendChild(jsapi);
    },
    // 地图定位
    getPositioning(that) {
      AMap.plugin("AMap.CitySearch", function() {
        var citySearch = new AMap.CitySearch();
        citySearch.getLocalCity(function(status, result) {
          if (status === "complete" && result.info === "OK") {
            // 查询成功，result即为当前所在城市信息
            that.$router.replace("/hotel?cityName=" + result.city);
            that.open(result.city);
          }
        });
      });
    },
    open(city) {
      this.$alert(
        `<p><i class="el-icon-success" style="color:#67c23a;font-size:26px"></i>定位当前城市：${city}</p>`,
        "提示",
        {
          dangerouslyUseHTMLString: true
        }
      );
    }
  },
  watch: {
    // 城市发生变化更新区域
    "$route.query.cityName": {
      handler: function() {
        this.getScenic();
      },
      immediate: true,
      deep: true
    },
    $route: {
      handler: function() {
        // cityName为空时
      },
      immediate: true
    }
  }
};
</script>
<style lang="less" scoped>
.box {
  margin-top: 20px;
}
/deep/ span {
  display: inline-block;
}
.el-form-item {
  display: inline-block;
  margin-right: 10px;
}
.main {
  display: flex;
  .left {
    font-size: 14px;
    flex: 1;
    // height: 260px;
    // background: chartreuse;
    color: #666666;
    .aera {
      display: flex;
      p {
        width: 50px;
        // background: chocolate;
      }
      .itemBox {
        flex: 1;
        font-size: 14px;
        padding-left: 20px;
        .text {
          display: flex;
          flex-wrap: wrap;
          // 两行的高度为38px
          max-height: 38px;
          overflow: hidden;
          // transition: max-height 1s ease;
          transition: max-height 0.6s ease-in-out;
        }
        .active {
          max-height: 999px;
          transition: max-height 1s ease-in-out;
        }
        .item {
          padding-right: 15px;
        }
        .unfold {
          cursor: pointer;
          i {
            transform: rotate(270deg);
            color: #f90;
          }
          .el-icon {
            transform: rotate(90deg);
          }
        }
      }
    }
    .price {
      margin-top: 20px;
      display: flex;
      font-size: 14px;
      span {
        &:first-child {
          margin-right: 15px !important;
        }
        margin-right: 30px;
        display: flex;
        .numbox {
          margin-right: 8px;
          .el-tooltip {
            display: flex;
            align-items: flex-end;
          }
        }
        i {
          color: #ff9900;
        }
      }
      .prompt {
        margin: 0 5px;
        width: 15px;
        height: 15px;
        line-height: 15px;
        background: #cccccc;
        border-radius: 50%;
        text-align: center;
        color: #fff;
        font-size: 10px;
      }
    }
  }
  .right {
    // margin-left: 30px;
    width: 420px;
    height: 260px;
    // background: burlywood;
  }
}
.people {
  padding: 15px 0 20px 0;
  // background: pink;
  border-bottom: 1px solid #ddd;
  display: flex;
  span {
    flex: 1;
  }
  .el-select {
    width: 90px;
  }
}
.btn {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
/deep/ .content-marker {
  position: relative;
  white-space: normal;
  width: 32px;
  height: 40px;
  top: -47px;
  right: 5px;
  img {
    // 规定段落中的文本不进行换行
    white-space: normal;
    width: 100%;
    height: 100%;
  }
  .marker-index {
    position: absolute;
    top: 1px;
    right: 6px;
    width: 20px;
    height: 25px;
    line-height: 25px;
    font-size: 16px;
    text-align: center;
    color: #fff;
  }
}
</style>
